<template>
    <div class="w-full h-full">
        <client-only>
            <vue-json-pretty
                v-if="renderJson && Object.keys(renderJson).length > 0"
                class="custompretty w-full h-full"
                v-model:data="localValue"
                :deep="renderConfig.deep"
                :show-double-quotes="renderConfig.showDoubleQuotes"
                :show-length="renderConfig.showLength"
                :show-line="renderConfig.showLine"
                :show-line-number="renderConfig.showLineNumber"
                :collapsed-on-click-brackets="renderConfig.collapsedOnClickBrackets"
                :show-icon="renderConfig.showIcon"
                :show-key-value-space="renderConfig.showKeyValueSpace"
                :editable="renderConfig.editable"
                :editable-trigger="renderConfig.editableTrigger"
                :item-height="renderConfig.itemHeight"
                :item="renderConfig.theme"
                @nodeClick="handleNodeClick" 
                :show-select-controller="renderConfig.showSelectController"
                >
            </vue-json-pretty>
        </client-only>
    </div>
</template>
<script lang="ts" setup>
import 'vue-json-pretty/lib/styles.css';
import VueJsonPretty from 'vue-json-pretty';

const props = defineProps({
    renderJson: {
        type: Object,
        default: () => {},
        required: true,
    },
    config: {
        type: Object,
        default: () => {},
    },
});

const emits = defineEmits(['update:renderJson','checkedNode']);

const localValue = ref({});

watch(()=>props.renderJson,(newVal)=>{
    localValue.value = newVal;
}, { deep: true,immediate:true })

watch(()=>localValue,(newVal)=>{
    emits('update:renderJson',newVal.value);
}, { deep: true,immediate:true })


function handleNodeClick(node:any) {
    emits('checkedNode',node);
}

const jsonConfig:any = reactive({
    showLength: true,
    showLine: true,
    showLineNumber: true,
    showDoubleQuotes: true,/* 是否key名显示双引号 */
    collapsedOnClickBrackets: true,/* 是否支持折叠 */
    useRenderNodeKeySlot: true,
    useRenderNodeValueSlot: true,
    deep: 4,
    setPathCollapsible: true,
    showIcon: true,
    showKeyValueSpace: true,
    showSelectController: true,
    editable:true,
    theme:"dark",
    editableTrigger:"click",
    itemHeight:20,
    saveTime:100,/* 防抖间隙 */
})
const renderConfig = computed(() => {
    return Object.assign(props.config,jsonConfig);
});
</script>
<style lang="scss" scoped>
.custompretty{
    :deep(.vjs-tree-node){
        &:hover{
            background-color: rgba(230,247,255,0.5) !important;
        }
    }
}
</style>